<div *ngIf="mode === devicesViewMap">
    <div *ngIf="server && server.property">
        <div class="main-line-flow" [style.left.px]="getMainLineLeftPosition()" [style.top.px]="getMainLineTopPosition('flow')" [style.width.px]="lineFlowSize"
            [style.height.px]="getMainLineHeight('flow')"></div>
        <div *ngFor="let flow of devicesValue('flow'); index as i" class="flow-line" [style.left.px]="getDeviceLineLeftPosition(i, 'flow')"
            [style.top.px]="getDeviceLineTopPosition('flow')" [style.width.px]="lineFlowSize" [style.height.px]="flowLineHeight"></div>
        <div class="connection-line" [style.left.px]="getDeviceConnectionLeftPosition('flow')" [style.top.px]="getDeviceConnectionTopPosition('flow')"
            [style.width.px]="getDeviceConnectionWidth('flow')" [style.height.px]="lineFlowSize"></div>

        <div class="main-line" [style.left.px]="getMainLineLeftPosition()" [style.top.px]="getMainLineTopPosition()" [style.width.px]="lineDeviceSize"
            [style.height.px]="getMainLineHeight()">
        </div>
        <div *ngFor="let device of devicesValue(); index as i" class="device-line" [style.left.px]="getDeviceLineLeftPosition(i)" [style.top.px]="getDeviceLineTopPosition()"
            [style.width.px]="lineDeviceSize" [style.height.px]="deviceLineHeight"></div>
        <div class="connection-line" [style.left.px]="getDeviceConnectionLeftPosition()" [style.top.px]="getDeviceConnectionTopPosition()"
            [style.width.px]="getDeviceConnectionWidth()" [style.height.px]="lineDeviceSize"></div>
    </div>
    <div class="container">
        <div class="main-device" *ngIf="server && server.property" [style.left.px]="getMainLeftPosition()" [style.top.px]="getMainTopPosition()" [style.width.px]="mainWidth"
            [style.height.px]="mainHeight" [style.borderWidth.px]="mainBorder">
            <span class="device-header" style="padding-top: 10px;">{{ server.name }}</span>
            <span class="device-pro">{{ server.property.address }}</span>
            <!-- <mat-icon (click)="onListDevice(server)" class="device-icon device-list">list_alt</mat-icon> -->
            <!-- <mat-icon (click)="onEditDevice(server)" class="device-icon device-edit" >edit</mat-icon> -->
            <button *ngIf="!readonly" mat-icon-button (click)="onListDevice(server)" class="device-icon device-list mat-button-sm" [style.right.px]="2" matTooltip="{{'device.property-tags' | translate}}">
                <mat-icon>link</mat-icon>
            </button>         
        </div>

        <div *ngFor="let flow of devicesValue('flow'); index as i" class="node-flow" [style.color]="(flow.enabled) ? '#000000' : '#828282'"
            [style.left.px]="getDeviceLeftPosition(i, 'flow')" [style.top.px]="getDeviceTopPosition('flow')" [style.width.px]="flowWidth" [style.height.px]="flowHeight"
            [style.borderWidth.px]="flowBorder">
            <span class="device-header">{{ flow.name }}</span>
            <span class="device-pro" *ngIf="flow.property">{{ flow.property.address }}</span>
            <span class="device-pro" style="padding-bottom: 10px;">{{ getDevicePropertyToShow(flow) }}</span>
            <div class="device-status" *ngIf="flow.enabled" [style.background-color]="getDeviceStatusColor(flow)"></div>
            <button *ngIf="!readonly" mat-icon-button (click)="onListDevice(flow)" class="device-list mat-button-sm" [style.right.px]="(readonly) ? 0 : 30" matTooltip="{{'device.property-tags' | translate}}">
                <mat-icon>link</mat-icon>
            </button>
            <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(flow)" class="device-edit mat-button-sm" matTooltip="{{'device.property-edit' | translate}}">
                <mat-icon style="font-size: 17px">edit</mat-icon>
            </button>
            <button *ngIf="!readonly" mat-icon-button (click)="onRemoveDevice(flow)" class="device-delete mat-button-sm" matTooltip="{{'device.property-remove' | translate}}">
                <mat-icon style="font-size: 17px">clear</mat-icon>
            </button>
        </div>

        <div *ngFor="let device of devicesValue(); index as i" [ngClass]="getNodeClass(device)" [style.color]="(device.enabled) ? '#FFFFFF' : '#C5C5C5'"
            [style.left.px]="getDeviceLeftPosition(i)" [style.top.px]="getDeviceTopPosition()" [style.width.px]="deviceWidth" [style.height.px]="deviceHeight"
            [style.borderWidth.px]="deviceBorder">
            <span class="device-header">{{ device.name }}</span>
            <span class="device-pro" *ngIf="device.property">{{ device.property.address }}</span>
            <span class="device-pro" style="padding-bottom: 10px;">{{ getDevicePropertyToShow(device) }}</span>
            <div class="device-status" *ngIf="device.enabled" [style.background-color]="getDeviceStatusColor(device)"></div>
            <button *ngIf="!readonly" mat-icon-button (click)="onListDevice(device)" class="device-list mat-button-sm" [style.right.px]="(readonly) ? 0 : 30" matTooltip="{{'device.property-tags' | translate}}">
                <mat-icon>link</mat-icon>
            </button>
            <button *ngIf="!readonly" mat-icon-button (click)="onEditDevice(device)" class="device-edit mat-button-sm" matTooltip="{{'device.property-edit' | translate}}">
                <mat-icon style="font-size: 17px">edit</mat-icon>
            </button>
            <button *ngIf="!readonly" mat-icon-button (click)="onRemoveDevice(device)" class="device-delete mat-button-sm" matTooltip="{{'device.property-remove' | translate}}">
                <mat-icon style="font-size: 17px">clear</mat-icon>
            </button>
        </div>
    </div>
</div>
<div class="container" [ngClass]="mode === devicesViewList ? 'showTable' : 'hideTable'">
    <mat-table #table [dataSource]="dataSource" matSort>
        <!-- Edit Column -->
        <ng-container matColumnDef="select">
            <mat-header-cell *matHeaderCellDef [ngClass]="!readonly ? 'selectWidthClass' : 'selectHideClass'">
                <button *ngIf="!readonly" mat-icon-button (click)="addDevice()" class="remove" matTooltip="{{'device.property-add' | translate}}">
                    <mat-icon>add</mat-icon>
                </button>
            </mat-header-cell>
            <mat-cell *matCellDef="let element" [ngClass]="!readonly ? 'selectWidthClass' : 'selectHideClass'">
                <button *ngIf="!readonly" mat-icon-button (click)="onListDevice(element)" class="remove" matTooltip="{{'device.property-tags' | translate}}">
                    <mat-icon>link</mat-icon>
                </button>
                <button *ngIf="!readonly && !isServer(element)" mat-icon-button (click)="onEditDevice(element)" class="remove" matTooltip="{{'device.property-edit' | translate}}">
                    <mat-icon>edit</mat-icon>
                </button>
            </mat-cell>
        </ng-container>
        <!-- Name Column -->
        <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-name' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.name}} </mat-cell>
        </ng-container>
        <!-- Type Column -->
        <ng-container matColumnDef="type">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-type' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.type}} </mat-cell>
        </ng-container>
        <!-- Polling Column -->
        <ng-container matColumnDef="polling">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-polling' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.polling}} </mat-cell>
        </ng-container>
        <!-- Address Column -->
        <ng-container matColumnDef="address">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-address' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element">{{getDeviceAddress(element)}} </mat-cell>
        </ng-container>
        <!-- Status Column -->
        <ng-container matColumnDef="status">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-status' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element" [style.color]="getDeviceStatusColor(element)">{{getDeviceStatusText(element)}} </mat-cell>
        </ng-container>
        <!-- Enabled Column -->
        <ng-container matColumnDef="enabled">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{'devices.list-enabled' | translate}} </mat-header-cell>
            <mat-cell *matCellDef="let element">{{element.enabled}} </mat-cell>
        </ng-container>
        <!-- Button remove Column -->
        <ng-container matColumnDef="remove">
            <mat-header-cell *matHeaderCellDef></mat-header-cell>
            <mat-cell *matCellDef="let element">
                <button *ngIf="!readonly && !isServer(element)" mat-icon-button (click)="$event.stopPropagation();onRemoveDevice(element)" class="remove" matTooltip="{{'device.property-remove' | translate}}">
                    <mat-icon>clear</mat-icon>
                </button>
            </mat-cell>
        </ng-container>
    
        <mat-header-row *matHeaderRowDef="displayedColumns" [ngStyle]="{'min-width.px': tableWidth}"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" class="my-mat-row" [ngStyle]="{'min-width.px': tableWidth}"></mat-row>
    </mat-table>
    <mat-paginator [pageSizeOptions]="[10, 25, 100]" [pageSize]="25" style="position: relative; right: 100px;"></mat-paginator>
</div>